<template>
	<view class="bind-wxpay-qrcode">
		<g-navbar title="我的收款码" backgroundColor="#188cf1" fontColor="#ffffff" />
		<view class="main">
			<view class="user-avatar-wrapper">
				<image :src="userInfo.avatars" class="avatar" mode="aspectFill" />
			</view>
			<view class="title">
				我的个人收款码
			</view>
			<view class="qrcode-wrapper">
				<view class="qrcode-inner-wrapper">
					<image :src="formData.wechat_img" class="qrcode"></image>
				</view>
			</view>
			<view class="upload-btn" @click="upload">
				上传收款二维码
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, Ref, ref } from "vue";
	import { useStore } from 'vuex';
	import REST_URL from '@/http/http.restUrl';
	import { useToken } from '@/hooks/useToken';
	import { onLoad } from '@dcloudio/uni-app'
	import { ROUTE_TYPE } from '@/enum/router';
	import { GET_STORE_USERINFO } from '@/store/gettersType';
	import { baseUrl } from '@/http';

	const store = useStore();
	const { getTokenSync, removeTokenSync } = useToken();

	// type handleType = 'upload' | 'edit';

	// const type : Ref<handleType> = ref('upload');

	// onLoad((e) => {
	// 	if (e) {
	// 		type.value = e.type;
	// 	}
	// })

	interface IFromData {
		customer_id : number,
		wechat_img : string,
	}

	const formData : IFromData = reactive({
		customer_id: store.getters[GET_STORE_USERINFO].id,
		wechat_img: '',
	})

	const getIdCardInfo = async () : Promise<void> => {
		await uni.loginManger.$interceptor;
		const data = (await uni.http.POST(REST_URL.getCardList, {
			customer_id: store.getters[GET_STORE_USERINFO].id,
		})).data;
		formData.wechat_img = data.wechat.wechat_img;
	}

	getIdCardInfo()

	const upload = () => {
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: async (res) => {
				const token = getTokenSync();
				uni.showLoading({})
				console.log('res.tempFilePaths[0]=======>', res.tempFilePaths[0])
				let options : UniApp.UploadFileOption;
				const success = async (res : UniApp.UploadFileSuccessCallbackResult) => {
					const result = JSON.parse(res.data);
					if (result.status === 200) {
						formData.wechat_img = result.data.file_url;
						await uni.http.POST(REST_URL.bindWxpayQRCode, formData);
						uni.router.route({
							url: '/pages_bind/card_pack/cardPack',
							type: ROUTE_TYPE.REDIRECTTO,
							success: () => {
								uni.prompt.$showToast('上传收款码成功，待审核通过', 5000);
								uni.$emit('updateCardPackList')
							}
						})
					} else if (result.status == -2) {
						uni.prompt.$showToast('上传的图片不能超过2M');
					} else {
						uni.prompt.$showToast('上传收款码失败');
					}
					uni.hideLoading();
				};

				const fail = () => {
					uni.prompt.$showToast('上传收款码失败');
					uni.hideLoading();
				}


				// #ifdef H5
				options = {
					url: `${baseUrl.value}/upload/uploadImagesCos`,
					file: res.tempFiles[0],
					header: {
						"Authorization": 'Bearer' + token,
					},
					success,
					fail
				}
				// #endif

				// #ifdef MP-WEIXIN
				options = {
					url: `${baseUrl.value}/upload/uploadImagesCos`,
					filePath: res.tempFilePaths[0],
					header: {
						"Authorization": 'Bearer' + token,
						'Content-Type': 'application/x-www-form-urlencoded',
					},
					name: "file",
					fileType: 'image',
					success,
					fail
				}
				// #endif

				uni.uploadFile(options)
			}
		});
	}
</script>

<style scoped lang="scss">
	@import "./bindWxpayQrcode.scss";
</style>